<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>TechBusiness | Style Demo</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-browsercheck.js"></script>
<script src="scripts/jquery-defaultvalue.js"></script>
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" type="text/css">
<script src="scripts/ie/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper row1">
  <header id="header" class="clear">
    <hgroup>
      <h1><a href="#">TechBusiness</a></h1>
      <h2>Free HTML5 Website Template</h2>
    </hgroup>
    <nav>
      <ul class="clear">
        <li><a href="index.html">Home</a></li>
        <li class="active"><a href="style-demo.html">Style Demo</a></li>
        <li><a href="full-width.html">Full Width</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
      </ul>
    </nav>
  </header>
</div>
<!-- content -->
<div class="wrapper row3">
  <div id="container" class="clear">
    <!-- content body -->
    <!-- ########################################################################################## -->
    <!-- ########################################################################################## -->
    <div id="content">
      <!-- ########################################################################################## -->
      <section>
        <h1>&lt;h1&gt; to &lt;h6&gt; - Headline Colour and Size Are All The Same</h1>
        <figure class="imgr"><img src="images/demo/imgr.gif" alt="" width="125" height="125"></figure>
        <p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur.</p>
        <p>Dapiensociis <a href="#">temper donec auctortortis cumsan</a> et curabitur condis lorem loborttis leo. Ipsumcommodo libero nunc at in velis tincidunt pellentum tincidunt vel lorem.</p>
        <figure class="imgl"><img src="images/demo/imgl.gif" alt="" width="125" height="125"></figure>
        <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
        <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
        <p>Portortornec condimenterdum eget consectetuer condis consequam pretium pellus sed mauris enim. Puruselit mauris nulla hendimentesque elit semper nam a sapien urna sempus.</p>
      </section>
      <section>
        <h1>Table(s)</h1>
        <table>
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
          <tbody>
            <tr class="light">
              <td>Value 1</td>
              <td>Value 2</td>
              <td>Value 3</td>
              <td>Value 4</td>
            </tr>
            <tr class="dark">
              <td>Value 5</td>
              <td>Value 6</td>
              <td>Value 7</td>
              <td>Value 8</td>
            </tr>
            <tr class="light">
              <td>Value 9</td>
              <td>Value 10</td>
              <td>Value 11</td>
              <td>Value 12</td>
            </tr>
            <tr class="dark">
              <td>Value 13</td>
              <td>Value 14</td>
              <td>Value 15</td>
              <td>Value 16</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section id="comments">
        <h2>Comments</h2>
        <ul>
          <li class="comment_odd">
            <article>
              <header>
                <figure><img src="images/demo/avatar.gif" width="32" height="32" alt=""></figure>
                <address>
                By <a href="#">A Name</a>
                </address>
                <time datetime="2000-04-06T08:15+00:00">Friday, 6<sup>th</sup> April 2000 @08:15:00</time>
              </header>
              <section>
                <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
              </section>
            </article>
          </li>
          <li class="comment_even">
            <article>
              <header>
                <figure><img src="images/demo/avatar.gif" width="32" height="32" alt=""></figure>
                <address>
                By <a href="#">A Name</a>
                </address>
                <time datetime="2000-04-06T08:15+00:00">Friday, 6<sup>th</sup> April 2000 @08:15:00</time>
              </header>
              <section>
                <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
              </section>
            </article>
          </li>
          <li class="comment_odd">
            <article>
              <header>
                <figure><img src="images/demo/avatar.gif" width="32" height="32" alt=""></figure>
                <address>
                By <a href="#">A Name</a>
                </address>
                <time datetime="2000-04-06T08:15+00:00">Friday, 6<sup>th</sup> April 2000 @08:15:00</time>
              </header>
              <section>
                <p>This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.</p>
              </section>
            </article>
          </li>
        </ul>
        <h2>Write A Comment</h2>
        <form action="#" method="post">
          <p>
            <input type="text" name="name" id="name" value="" size="22">
            <label for="name"><small>Name (required)</small></label>
          </p>
          <p>
            <input type="text" name="email" id="email" value="" size="22">
            <label for="email"><small>Mail (required)</small></label>
          </p>
          <p>
            <textarea name="comment" id="comment" cols="25" rows="10"></textarea>
            <label for="comment" class="hidden"><small>Comment (required)</small></label>
          </p>
          <p>
            <input name="submit" type="submit" id="submit" value="Submit Form">
            &nbsp;
            <input name="reset" type="reset" id="reset" value="Reset Form">
          </p>
        </form>
      </section>
      <!-- ########################################################################################## -->
    </div>
    <!-- right column -->
    <aside id="right_column">
      <!-- ########################################################################################## -->
      <h2>Site Navigation</h2>
      <nav>
        <ul>
          <li><a href="#">Free Website Templates</a></li>
          <li><a href="#">Free CSS Templates</a>
            <ul>
              <li><a href="#">Free XHTML Templates</a></li>
              <li><a href="#">Free Web Templates</a></li>
            </ul>
          </li>
          <li><a href="#">Free Website Layouts</a>
            <ul>
              <li><a href="#">Free HTML 5 Templates</a></li>
              <li><a href="#">Free Webdesign Templates</a>
                <ul>
                  <li><a href="#">Free FireWorks Templates</a></li>
                  <li><a href="#">Free PNG Templates</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Free Responsive Templates</a></li>
        </ul>
      </nav>
      <!-- /nav -->
      <section>
        <h2>Get In Contact</h2>
        <address>
        Full Name<br>
        Address Line 1<br>
        Address Line 2<br>
        Town/City<br>
        Postcode/Zip<br>
        <br>
        Tel: xxxx xxxx xxxxxx<br>
        Email: <a href="#">contact@domain.com</a>
        </address>
      </section>
      <!-- /section -->
      <section>
        <article>
          <h2>Lorem ipsum dolor</h2>
          <p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed.</p>
          <ul>
            <li><a href="#">Lorem ipsum dolor sit</a></li>
            <li>Etiam vel sapien et</li>
            <li><a href="#">Etiam vel sapien et</a></li>
          </ul>
          <p>Nuncsed sed conseque a at quismodo tris mauristibus sed habiturpiscinia sed. Condimentumsantincidunt dui mattis magna intesque purus orci augue lor nibh.</p>
          <p class="more"><a href="#">Continue Reading &raquo;</a></p>
        </article>
      </section>
      <!-- /section -->
      <!-- ########################################################################################## -->
    </aside>
    <!-- ########################################################################################## -->
    <!-- ########################################################################################## -->
    <!-- / content body -->
  </div>
</div>
<!-- Footer -->
<div class="wrapper row4">
  <div id="footer" class="clear">
    <!-- Section One -->
    <section class="one_third first">
      <div class="newsletter">
        <h2 class="title">Newsletter</h2>
        <p>Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoreet tincidunt ut.</p>
        <form method="post" action="#">
          <fieldset>
            <legend>Newsletter Form:</legend>
            <label for="nl_email">Email:</label>
            <input type="text" name="nl_email" id="nl_email" value="">
            <input type="submit" id="nl_submit" value="submit">
          </fieldset>
        </form>
      </div>
      <div class="social">
        <h2 class="title">Stay Social</h2>
        <ul class="clear">
          <li><a href="#"><img src="images/demo/social/1.gif" alt=""></a> Name Here</li>
          <li><a href="#"><img src="images/demo/social/1.gif" alt=""></a> Name Here</li>
          <li><a href="#"><img src="images/demo/social/1.gif" alt=""></a> Name Here</li>
          <li><a href="#"><img src="images/demo/social/1.gif" alt=""></a> Name Here</li>
        </ul>
      </div>
    </section>
    <!-- Section Two -->
    <section class="one_third">
      <h2 class="title">From The Blog</h2>
      <article>
        <header>
          <h2>Post Title</h2>
          <time datetime="2000-04-06">Friday, 6<sup>th</sup> April 2000</time>
        </header>
        <p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum.</p>
        <footer class="more"><a href="#">Read More &raquo;</a></footer>
      </article>
      <article>
        <header>
          <h2>Post Title</h2>
          <time datetime="2000-04-06">Friday, 6<sup>th</sup> April 2000</time>
        </header>
        <p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum.</p>
        <footer class="more"><a href="#">Read More &raquo;</a></footer>
      </article>
    </section>
    <!-- Section Three -->
    <section class="one_third">
      <h2 class="title">Latest Tweets</h2>
      <div class="ft_tweets">
        <ul>
          <li><a href="#">@namehere</a> Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoremut vitae doloreet <strong>1 day ago</strong></li>
          <li><a href="#">@namehere</a> Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoremut vitae doloreet <strong>1 day ago</strong></li>
          <li><a href="#">@namehere</a> Justoid nonummy laoreet phasellent penatoque in antesque pellus elis eget tincidunt. Nequatdui laorem justo a non tellus laoremut vitae doloreet <strong>1 day ago</strong></li>
        </ul>
      </div>
    </section>
    <!-- / Section -->
  </div>
</div>
<!-- Copyright -->
<div class="wrapper row5">
  <footer id="copyright" class="clear">
    <p class="fl_left">Copyright &copy; 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
  </footer>
</div>
<script>
$(document).ready(function () {
    $("#nl_email").defaultvalue("Enter Your Email Here");
});
</script>
</body>
</html>